<template>
	<view>
		<uni-nav-bar title="市场订单" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :border="false"
			:statusBar="true"></uni-nav-bar>

		<view class="px-32 py-28">
			<u-subsection :list="subsection" :current="subsectionIndex" active-color="#FF2644" @change="sectionChange"
				fontSize="32rpx" inactiveColor="#FFF"></u-subsection>
		</view>

		<view class="px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="round-12 bg-FFF py-32 px-16 mt-24" v-for="(item,index) in list" :key="item.id">
					<view class="text-32 font-700 flex items-center justify-between">
						<view class="">
							{{subsectionIndex == 0 ? '总求购量' : '总出售量'}}：{{ subsectionIndex == 0 ? item.needTotalNum : item.payJindouNum }}
						</view>
						<view class="" v-if="subsectionIndex == 0">
							剩余求购量：{{item.needJindouNum}}
						</view>
					</view>
					<u-divider></u-divider>
					<view class="text-28 flex items-center">
						<view class=" text-9E9E9E">
							订单编号:
						</view>
						<view class="">
							{{item.id}}
						</view>
					</view>
					<view class="text-28 flex items-center mt-12">
						<view class=" text-9E9E9E">
							{{subsectionIndex == 0 ? '发布' : '出售'}}时间:
						</view>
						<view class="">
							{{subsectionIndex == 0 ? item.createTime : item.transferTime}}
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subsection: [
					'我的求购单',
					'我的出售单'
				],
				subsectionIndex: 0,
				list: []
			};
		},
		onLoad() {
			this.refresh();
		},
		methods: {
			sectionChange(index) {
				this.subsectionIndex = index;
				this.refresh();
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					let curList;
					if (this.subsectionIndex == 0) {
						curList = await this.$Api.property.marketMineList({
							pageSize: 10,
							pageNum: pullScroll.page
						})
					} else {
						curList = await this.$Api.property.marketReceiverList({
							pageSize: 10,
							pageNum: pullScroll.page
						})
					}

					this.list = this.list.concat(curList.rows || []);

					if (curList.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= curList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	/deep/.u-subsection--button__bar {

		color: #FFF !important;
	}

	/deep/ .u-subsection--button {
		background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%) !important;
	}
</style>